<template>
  <div class="app-container home">
    <el-select
      v-model="value"
      placeholder="请选择年级"
      size="large"
      style="position: absolute; top: 10px; right:100px; z-index: 999; background-color:#5abbef ;"
    >
      <el-option
        v-for="item in options"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <div class="header">
        <echatrs :selectedGrade="value"/>
    </div>
    <div class="chinamap">
      <chinamap :selectedGrade="value"/>
    </div>
    <div class="header">
        <barchart :selectedGrade="value"/>
    </div>
  </div>
</template>
<script setup name="Index">
import echatrs from '@/components/Echarts/index.vue'
import chinamap from '@/components/Echarts/chinamap';
import barchart from '@/components/Echarts/barchart.vue';
import {getEmploymentStatsAndIntent,getProvinceStats} from '@/api/system/EmploymentInfo.js'
import { ref, onMounted, computed, watch } from 'vue'
const value = ref('')
const options= ref([])
const version = ref('3.8.7')

onMounted(() => {
  getProvinceStats().then((res) => {
    if (res.code === 200 && res.rows.length > 0) {
      // 设置默认选项
      options.value = res.rows.map(item => ({
        value: item.name,
        label: item.name,
      }));
      value.value = res.rows[0].name; // 设置默认值
    } else {
      console.error('获取省份数据失败或数据为空');
    }
  }).catch(err => {
    console.error('请求失败', err);
  });
});

// watch(value, (val) => {
//   console.log(val);
  
//   })
</script>

<style scoped lang="scss">
.home{
  width: 100vw;
  background-image:  url('../assets/images/pageBg.jpg') ;
  display: flex;
  justify-content: space-between;
  align-items: center;
  // flex-direction: column;
  color: #fff;
}
.header{
  flex: 1;
}
.chinamap{
  flex: 1.5;
}

</style>